<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期函数</title>
</head>
<body>
    <div id="app">
        {{name}} - {{ps}}
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            /* 自动挂载 */
            el:'#app',
            data:{
                name:'kuiya',
                ps:666
            },
            /* 1.创建阶段 */
            beforeCreate(){
                /* 在该阶段之前会进行初始化事件和生命周期函数，且没有添加挂载点 */
                console.log('beforeCreate.name:',this.name);
                console.log('beforeCreate.el:',this.$el);
            },
            created(){
                /* 响应式属性的注入在beforeCreate和created之间 */
                console.log('created.name',this.name);
                console.log('created.el:',this.$el);
            },

            /* 1.5 在创建阶段到挂载阶段之间实际上还经历了大量的处理工作 */
            /* 
                * 判断实例是否有el属性
                    + 若有，则开始判断template属性
                    + 若无，则查看是否有手动挂载(vm.$mount('#app'))
                ↓
                * 判断实例是否有template属性
                    + 若无，则el挂载点的outerHTML作为template
                    + 若有，则会把template属性的字符串模板，连同el挂载点给覆盖掉
                ↓
                * 判断是否有render
                    + 有则忽略掉template
            */

            /* 2.挂载阶段：把数据挂载到视图，对节点的操作一般放在mount阶段，因为数据已经有了 */
            beforeMount(){
                console.log('beforeMount.el:',this.$el);
            },
            // 挂载前数据未更新，挂载后数据更新
            mounted(){
                console.log('mount.el:',this.$el);
            },
            
            /* 3.更新阶段：数据更改时才会触发 */
            /* 当挂载阶段结束后会处于监听状态，当数据更新时，对节点进行虚拟DOM对比，然后重新局部渲染、更改数据 */
            beforeUpdate(){
                console.log('beforeUpdate.el.innerHTML:',this.$el.innerHTML);
            },
            // 控制台更改数据查看
            updated(){
                console.log('updated.el.innerHTML:',this.$el.innerHTML);
            },

            /* 4.销毁阶段：切断vm层和v层间的联系，销毁监听、子组件和事件，但不会对页面造成影响，m层还在 */
            beforeDestroy(){
                console.log('beforeDestroy');
            },
            // 控制台执行实例内置方法：vm.$destroy()，再查看页面：数据能更改，但视图不再更新
            destroyed(){
                console.log('destroyed');
            }

            /* 除了通过vm.$destroy控制销毁外，还可以用v-if控制 */

        })
    </script>
</body>
</html>